// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use 'partials/toolbars' as *;

// ============================================================================
// Base classes and mixins
// ============================================================================

@mixin i-box-title {
  @include font-family-title-light();
  color: $dark-blue;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
}

@mixin i-box-description {
  @include font-family-description();
  color: $dark-gray;
  font-size: 14px;
}

@mixin box-hr {
  @include border-bottom();
  height: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  margin-left: -10px;
  margin-right: -10px;

  &.inline {
    margin-left: 0;
    margin-right: 0;
  }
}

@mixin i-box-empty {
  color: $dark-gray;
  display: block;
  font-size: 1em;
  font-style: italic;
  text-align: left;
}

@mixin i-box-sortable-handle-background {
  @include transition(background-color $default-transition-duration $default-transition-function);
  background-color: lighten($dark-gray, $color-variation);
  cursor: move;

  &::before,
  > .handle::before {
    color: $light-gray;
  }

  &:active,
  &:hover {
    background-color: white;

    &::before,
    > .handle::before {
      color: $dark-gray;
    }
  }
}

@mixin i-box-sortable-handle-grip {
  @include icon-before('icon-handle');
}

@mixin i-box-sortable-handle {
  @include i-box-sortable-handle-background();
  @include i-box-sortable-handle-grip();
}

// ============================================================================
// Boxes
// ============================================================================

$i-box-padding: 10px;

@mixin i-box-horizontal-padding {
  padding-left: $i-box-padding;
  padding-right: $i-box-padding;
}

@mixin i-box-cancel-horizontal-margin {
  margin-left: -$i-box-padding;
  margin-right: -$i-box-padding;
}

@mixin i-box-vertical-padding {
  padding-top: $i-box-padding;
  padding-bottom: $i-box-padding;
}

@mixin i-box-cancel-vertical-margin {
  margin-top: -$i-box-padding;
  margin-bottom: -$i-box-padding;
}

@mixin i-box-padding {
  @include i-box-horizontal-padding();
  @include i-box-vertical-padding();
}

@mixin i-box-cancel-margin {
  @include i-box-cancel-horizontal-margin();
  @include i-box-cancel-vertical-margin();
}

// Use the titled-rule as the top border of the i-box. Combine with .titled on the i-box.
@mixin i-box-titled-rule-header {
  @include i-box-cancel-horizontal-margin();
  margin-top: -18px; // Pure magic number to align the rule with the i-box border
}

@mixin single-box-shadow(
  $hoff: $default-box-shadow-h-offset,
  $voff: $default-box-shadow-v-offset,
  $blur: $default-box-shadow-blur,
  $spread: $default-box-shadow-spread,
  $color: $default-box-shadow-color,
  $inset: $default-box-shadow-inset
) {
  box-shadow: $inset $hoff $voff $blur $spread $color;
}

.i-box {
  @include i-box-padding();
  @include default-border-radius();
  @include border-all();
  @include single-box-shadow();
  @include transition(padding-bottom);

  background: white;
  color: $black;

  hr {
    @include box-hr();
  }

  > .empty {
    @include i-box-empty();
  }

  .ui-i-box-sortable-handle {
    @include i-box-sortable-handle();
    @include transition(
      background-color $default-transition-duration $default-transition-function,
      height $default-transition-duration $default-transition-function
    );

    font-size: 1.2em;
    height: 10px;
    margin: -10px -10px 10px -10px;
    text-align: center;

    &:hover,
    &:active {
      @include border-bottom();
      height: 20px;

      &::before {
        color: $dark-gray;
        top: 3px;
      }
    }

    &::before {
      @include transition(top);
      transform: rotate(90deg);
      display: inline-block;
      position: relative;
      top: -3px;
    }
  }

  .titled-rule {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  > .titled-rule:first-child,
  > *:first-child > .titled-rule:first-child {
    @include i-box-titled-rule-header();
  }

  // For i-box without headers where the first child is a .titled-rule
  &.titled {
    border-top: none;
  }

  .i-box-footer {
    @include i-box-cancel-margin();
    background-color: $light-gray;
    box-shadow: inset 0 15px 20px -20px $gray;
    overflow: auto;
    padding: $i-box-padding;
    margin-top: $i-box-padding;
  }

  .i-box-header {
    @include i-box-cancel-margin();
    @include i-box-padding();
    @include border-bottom();
    @include transition(margin-bottom);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: $light-gray;
    overflow: hidden;
    margin-bottom: $i-box-padding;
    word-break: break-word;

    .i-box-title {
      @include i-box-title();
    }

    // Reset default h4 styles when used as box title
    h4.i-box-title {
      margin: 0;
    }

    .i-box-description {
      @include i-box-description();
    }

    .i-box-buttons {
      margin: 0;
      padding: 0;
    }

    .i-box-align-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 5px;
    }

    .i-box-metadata {
      float: right;
      line-height: $toolbar-thin-height;

      .label {
        color: $black;
        font-weight: bold;

        &:not(:first-child) {
          margin-left: 0.7em;
        }
      }

      .content {
        color: $light-black;
        font-style: italic;
      }
    }

    .i-box-buttons + .i-box-metadata {
      margin-right: 1em;
    }
  }

  .i-box-table-widget {
    @include i-box-cancel-margin();

    > table.i-table-widget {
      border: none;
    }

    > *:not(table) {
      @include i-box-padding();
    }
  }

  @mixin header-only-sizing() {
    padding-bottom: 0;

    .i-box-header {
      margin-bottom: 0;
    }
  }

  &.header-only {
    @include header-only-sizing();

    .i-box-header {
      border-bottom: none;
    }
  }

  &.header-only-transition {
    @include header-only-sizing();
  }
}

.i-box.no-shadow {
  box-shadow: none;
}

.i-box.highlight {
  border-color: $pastel-blue;

  .i-box-header {
    background-color: $light-blue;
    border-bottom-color: $pastel-blue;
  }
}

.i-box.footer-only {
  padding-top: 0;

  .i-box-footer {
    box-shadow: none;
    margin-top: 0;
  }
}

// ============================================================================
// Group of boxes
// ============================================================================

.i-box-group {
  $margin: 15px;

  & + & {
    margin-top: $margin;
  }

  &.horz {
    overflow: hidden;
    padding-bottom: $margin;

    .i-box {
      float: left;
      margin-right: $margin;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &.vert {
    .i-box {
      margin-bottom: $margin;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .i-box-sortable-placeholder {
    @include border-all($style: dashed);
    background-color: $light-gray;
    margin-bottom: $margin;
  }
}

// ============================================================================
// Boxed group lists
// ============================================================================

.i-box.just-group-list {
  padding-bottom: 0;
  padding-top: 0;

  .i-box-header {
    margin-bottom: 0;
    margin-top: 0;
  }

  ul.group-list {
    > li {
      &:first-child {
        border-top: none;
      }

      &[class*='icon-']:not(:empty)::before {
        margin-right: 0.5em;
      }

      &:last-child {
        margin-bottom: 10px;
      }
    }
  }

  &.with-hover-effect {
    ul.group-list > li:hover {
      background-color: $light-gray;
    }
  }
}

.i-box ul.group-list {
  color: $light-black;
  list-style: outside none none;
  padding: 0;
  margin: 0 -10px;

  // Sortable <li> will use absolute positioning while being moved thus the
  // <ul> must use relative positioning for correct alignment.
  position: relative;

  > li {
    @include border-top();
    padding: 10px;

    > span:not(:last-child) {
      margin-right: 10px;
    }

    .list-item-title {
      font-weight: bold;
    }

    .list-item-info {
      margin: 0 1em;

      > span:not(:last-child) {
        margin-right: 0.7em;
      }

      .label {
        font-weight: bold;
      }

      .content {
        font-style: italic;
      }
    }

    // Sortable row with handle on the left
    &.ui-sortable {
      display: flex;
      margin: 0;

      > .ui-sortable-handle {
        @include i-box-sortable-handle-background();
        display: flex;
        align-items: center;
        visibility: hidden;
        width: 1em;

        > .handle {
          @include i-box-sortable-handle-grip();
        }
      }

      &:hover {
        > .ui-sortable-handle {
          visibility: visible;
        }
      }

      > .ui-sortable-content {
        flex-grow: 1;
      }
    }

    &.ui-sortable-helper {
      @include border-vert(lighten($gray, $color-variation));
      border-top-width: 1px !important;
    }
  }

  &.content-after {
    margin-top: -$i-box-padding;
    margin-bottom: $i-box-padding;

    > li:first-child {
      border-top: none;
    }

    > li:last-child {
      @include border-bottom();
    }
  }

  &.no-content-before {
    > li:first-child {
      border-top-width: 0;
    }
  }

  &.with-buttons {
    line-height: 1.8em;

    .i-button {
      margin-top: 0;
    }
  }

  &:last-child {
    margin-bottom: -10px;
  }
}

.error-box {
  @include border-all();
  font-size: 1.2em;
  padding: 2em;
  background-color: $light-gray;
  width: 400px;
  margin: 50px auto;
  padding-top: 20px;
  text-align: center;
  border-radius: 0.5em;

  h1 {
    color: $dark-blue;
    font-size: 2em;
    padding-bottom: 10px;
  }

  p {
    color: $light-black;
    word-wrap: break-word;
  }

  .error-box-small {
    margin-top: 2em;
    font-size: 0.8em;
  }
}
